<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>用户列表</title>
<meta name="description" content="用户列表">
<meta name="keywords" content="list">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png"
	href="${ctx}/static/i/favicon.png">
<link rel="apple-touch-icon-precomposed"
	href="${ctx}/static/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<link rel="stylesheet"
	href="${ctx}/static/css/amazeui.min.css" />
<link rel="stylesheet"
	href="${ctx}/static/css/admin.css">
<link rel="stylesheet" href="${ctx}/static/css/app.css">
<style rel="stylesheet">
body{
  background:none;
}
.tpl-block{
  background:#fff;
  padding-top:30px;
}
body ol.am-breadcrumb {
      padding-top:0;
      margin:0;
      
}
.am-g .searchdiv{
  float:right;
}
.am-table .am-checkbox {
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
}

.am-cf {
	width: 100%;
	text-align: center;
}

.am-fr {
	width: 100%;
}

.clear {
	clear: both;
}
.am-modal-dialog{
 top:-10%;
}
#my-alert .am-modal-dialog{
  width:400px;
}
#page .am-page-default {
	text-align: center;
}
</style>
</head>

<body data-type="generalComponents" style="background:none;">
            <ol class="am-breadcrumb topol">
                <li><a href="${ctx}/index" class="am-icon-home">首页</a></li>
                <li><a href="${ctx}/user">用户管理</a></li>
                <li class="am-active">用户列表</li>
            </ol>
	<div class="tpl-block">
		<div class="am-g">
			<div class="am-u-sm-12 am-u-md-6">
				<div class="am-btn-toolbar">
					<div class="am-btn-group am-btn-group-xs">
						<button type="button" class="am-btn am-btn-default am-btn-success">
							<span class="am-icon-plus"></span> 新增
						</button>
						<!-- <button type="button" class="am-btn am-btn-default am-btn-secondary"><span class="am-icon-save"></span> 保存</button>
                                    <button type="button" class="am-btn am-btn-default am-btn-warning"><span class="am-icon-archive"></span> 审核</button> -->
						<button type="button" id="delbtn" class="am-btn am-btn-default am-btn-danger"
							>
							<span class="am-icon-trash-o"></span> 删除
						</button>
						<button type="button" class="am-btn am-btn-default am-btn-success"
							data-am-modal="{target: '#my-excel', closeViaDimmer: 0, width: 400, height: 225}">
							<span class="am-icon-plus"></span> 批量导入
						</button>
					</div>
				</div>
			</div>

			<div class="am-u-sm-12 am-u-md-3 searchdiv">
			<!--这个form是必须要有的，与分页有关  -->
				<form id="pageForm" action="${ctx}/user/list">
					<div class="am-input-group am-input-group-sm">
						<input type="hidden" id="pageSize" name="pageSize" value="${pageInfo.pageSize!}"> 
						<input type="hidden" id="pageNum" name="pageNum" value="${pageInfo.pageNum!}">
						<input type="hidden"  name="userType" value="${user.userType!}">
						<input type="text" name="name" value="${user.name!}" placeholder="用户名或姓名" class="am-form-field"> 
						<span class="am-input-group-btn">
							<button class="am-btn am-btn-default am-btn-success tpl-am-btn-success am-icon-search" type="submit"></button>
						</span>
					</div>
				</form>
			</div>
			<div class="am-g">
				<div class="am-u-sm-12">
					<form class="am-form">
						<table class="am-table am-table-striped am-table-hover table-main">
							<thead>
								<tr>
									<th class="table-check"><label class="am-checkbox">
											<input type="checkbox" id="checktop" value="" data-am-ucheck>
									</label></th>
									<th>用户名</th>
									<th>姓名</th>
									<th>性别</th>
									<th>年龄</th>
									<th>手机号</th>
									<th>出生日期</th>
									<th>身份证号</th>
									<th>身份类型</th>
									<th>创建时间</th>
									<th class="table-set">操作</th>
								</tr>
							</thead>
							<tbody>
								<#list pageInfo.list as allUser>
								<tr>
									<td><#if allUser.userType!="0"><label class="am-checkbox"> <input
											type="checkbox" name="check" value="${allUser.userId}"
											data-am-ucheck>
									</label></#if></td>
									<td>${allUser.username!}</td>
									<td>${allUser.name!}</td>
									<td>${allUser.sex!}</td>
									<td>${allUser.age!}</td>
									<td>${allUser.phoneNumber!}</td>
									<td>${(allUser.birthday?string('yyyy-MM-dd'))!}</td>
									<td>${allUser.idCard!}</td>
									<td>
									<#if allUser.userType="0"> 超级管理员<#elseif allUser.userType="1">普通管理员<#else>普通用户</#if>
									</td>
									<td>${(allUser.createTime?string('yyyy-MM-dd'))!}</td>
									<td><a
										href="${request.contextPath}/user/${allUser.userId}/edit">编辑</a>
								</tr>
								
								</#list>
							</tbody>
						</table>
						<div class="am-cf">
							<div class="am-fr clear"><@h.page/></div>

						</div>
						<hr>

					</form>
				</div>

			</div>
		</div>
		<div class="tpl-alert"></div>
	</div>

	<!-- 删除弹窗 -->
	<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">警告</div>
			<div class="am-modal-bd">确定要删除吗？</div>
			<div class="am-modal-footer">
				<span class="am-modal-btn" data-am-modal-cancel>取消</span> <span
					class="am-modal-btn" data-am-modal-confirm onclick="updatePass(this)"
					data-am-modal="{target: '#my-alert'}">确定</span>
			</div>
		</div>
	</div>

	<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">提示</div>
			<div class="am-modal-bd"></div>
			<div class="am-modal-footer">
				<span class="am-modal-btn">确定</span>
			</div>
		</div>
	</div>
	<!-- 	导入Excel表 -->
	<div class="am-modal am-modal-no-btn" tabindex="-1" id="my-excel">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">
				excel表导入 <a href="javascript: void(0)"
					class="am-close am-close-spin" data-am-modal-close>&times;</a>
			</div>
			<div class="am-modal-bd">
				<form class="am-form" action="" method="post">
					<fieldset>
						<div class="am-form-group am-form-file">
							<button type="button" class="am-btn am-btn-danger am-btn-sm">
								<i class="am-icon-cloud-upload"></i> 选择要上传的文件
							</button>
							<input id="doc-form-file" type="file" multiple>
						</div>
						<div id="file-list"></div>
						<button class="am-btn am-btn-secondary" type="submit">提交</button>
					</fieldset>
				</form>
			</div>
		</div>
	</div>
	<script src="${ctx}/static/js/jquery.min.js"></script>
	<script src="${ctx}/static/js/amazeui.min.js"></script>
	<script src="${ctx}/static/js/app.js"></script>
	<script>
		$(function() {
			
		//添加
			$(".am-btn-group .am-btn").click(function() {
								var index = $(this).index();
								if (index == 0) {
									window.location.href = "${request.contextPath}/user/create";
								}
							});
			//修改
			$("edit").click(function() {
				window.location.href = "${request.contextPath}/user/edit";
			});
			$('#doc-form-file').on('change',function() {
						var fileNames = '';
						$.each(this.files, function() {
							fileNames += '<span class="am-badge">' + this.name
									+ '</span> ';
						});
						$('#file-list').html(fileNames);
					});
		//点击删除判断是否有选中
       $("#delbtn").click(function(){
    	  if($('input[type=checkbox]:checked').length>0){
    		  $(this).attr("data-am-modal","{target: '#my-confirm', closeViaDimmer: 0, width: 400}");
    	  }else{
    	  $(this).attr("data-am-modal","{target: '#my-alert'}");
    	  $("#my-alert").find(".am-modal-bd").text("请先选中");
    	  }
       });
		// 全选及全不选
		$("#checktop").change(function() {
			$("tbody tr input[type='checkbox']").uCheck('toggle');

		});
		});
   //确定删除
		function updatePass(eva) {
			var checkbox = document.getElementsByName("check");
			  
			var dels = "";
			var count = 0;
			for (var i = 0; i < checkbox.length; i++) {
				if (checkbox[i].checked) {
					count = count + 1;
					dels = dels + checkbox[i].value + ",";
				}
			}
			$.ajax({
				url : "${request.contextPath}/user/delete?dels=" + dels,
				type : "post",
				dataType : "text",
				contentType : "application/text;charset=utf-8",
				cache : false,
				async : false,
				success : function(data) {
					$(eva).attr("data-am-modal","{target: '#my-alert'}");
					$('input[type=checkbox]:checked').parents("tr").remove();
					 $("#my-alert").find(".am-modal-bd").text("已成功删除");
				},
				error : function() {
					$(eva).attr("data-am-modal","{target: '#my-alert'}");
					$("#my-alert").find(".am-modal-bd").text("请求失败");
				},
			}, 'text');
		}
	
	</script>
</body>

</html>